<html>
	<head>
		<title>flex布局练习</title>
		<base href="http://edu.bluej.cn/public/uploads/20181019/201810191651071/1/" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="style.css"/>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                height: 200px;
                display: flex;
                background-color: #9fb8ad;
                justify-content: space-around;
                align-items:center;
            }
            .box1 {
                width: 100px;
                height: 100px;
                border: 1px solid #ff005c;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: space-around;
            }
            .box1>div {
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50px;
            }

            .box2 {
                width: 100px;
                height: 100px;
                border: 1px solid #ff005c;
                border-radius: 5px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
            }
            .box2 > div {
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50px;
            }

            .box3 {
                width: 100px;
                height: 100px;
                border: 1px solid #ff005c;
                border-radius: 5px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .box3 div {
                display: flex;
                justify-content: space-around;
            }
            .box3 > div > p {
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50px;
            }
            .box3 > div:first-of-type > p:nth-of-type(2) {
                visibility: hidden;
            }
            .box3 > div:nth-of-type(3) > p:nth-of-type(1) {
                visibility: hidden;
            }

            .box4 {
                width: 100px;
                height: 100px;
                border: 1px solid #ff005c;
                border-radius: 5px;
                display: flex;
                justify-content: space-around;
            }
            .box4 div {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .box4 > div > p {
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50px;
            }

            .box5 {
                width: 100px;
                height: 100px;
                border: 1px solid #ff005c;
                border-radius: 5px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .box5 div {
                display: flex;
                justify-content: space-around;
            }
            .box5 > div > p {
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50px;
            }


            .box6 {
                width: 100px;
                height: 100px;
                border: 1px solid #ff005c;
                border-radius: 5px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .box6 div {
                display: flex;
                justify-content: space-around;
            }
            .box6 > div > p {
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50px;
            }

            .box7 {
                width: 100px;
                height: 100px;
                border: 1px solid #ff005c;
                border-radius: 5px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .box7 div {
                display: flex;
                justify-content: space-around;
            }
            .box7 > div > p {
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50px;
            }

            .box8 {
                width: 100px;
                height: 100px;
                border: 1px solid #ff005c;
                border-radius: 5px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .box8 div {
                display: flex;
                justify-content: space-around;
            }
            .box8 > div > p {
                width: 20px;
                height: 20px;
                background-color: black;
                border-radius: 50px;
            }
            .box8 > div:nth-of-type(2) > p:nth-of-type(2) {
                visibility: hidden;
            }
        </style>
	</head>
	<body>
		
		<!-- 使用flex布局完成骰子点数 -->
		<div class="box">
            <div class="box1">
                <div></div>
            </div>

            <div class="box2">
                <div></div>
                <div></div>
            </div>

            <div class="box3">
                <div>
                    <p></p>
                    <p></p>
                </div>            
                <div>
                    <p></p>
                </div>
                <div>
                    <p></p>
                    <p></p>
                </div>
            </div>

            <div class="box4">
                <div>
                    <p></p>
                    <p></p>
                </div>
                <div>
                    <p></p>
                    <p></p>
                </div>
            </div>

            <div class="box5">
                <div>
                    <p></p>
                    <p></p>
                </div>            
                <div>
                    <p></p>
                </div>
                <div>
                    <p></p>
                    <p></p>
                </div>
            </div>

            <div class="box6">
                <div>
                    <p></p>
                    <p></p>
                </div>            
                <div>
                    <p></p>
                    <p></p>
                </div>
                <div>
                    <p></p>
                    <p></p>
                </div>
            </div>

            <div class="box7">
                <div>
                    <p></p>
                    <p></p>
                    <p></p>
                </div>            
                <div>
                    <p></p>
                </div>
                <div>
                    <p></p>
                    <p></p>
                    <p></p>
                </div>
            </div>

            <div class="box8">
                <div>
                    <p></p>
                    <p></p>
                    <p></p>
                </div>            
                <div>
                    <p></p>
                    <p></p>
                    <p></p>
                </div>
                <div>
                    <p></p>
                    <p></p>
                    <p></p>
                </div>
            </div>
        </div>
		
	</body>
</html>